<!--  -->
<template>
  <div class="tool-bar">
    <ul class="clearfix">
      <li>
        <a href="#"
          ><span class="iconfont icon-yonghu"></span><span>个人中心</span></a
        >
      </li>
      <li>
        <a href="#"
          ><span class="iconfont icon-banshou"></span><span>售后中心</span></a
        >
      </li>
      <li>
        <a href="#"
          ><span class="iconfont icon-kefu1"></span><span>人工客服</span></a
        >
      </li>
      <li>
        <a href="#"
          ><span class="iconfont icon-gouwuchekong"></span>购物车<span></span
        ></a>
      </li>
      <li id="backTop" v-show="isShow">
        <a href="#"
          ><span class="iconfont icon-huidaodingbu"></span>回到顶部<span></span
        ></a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    //   scroll: 0,
    };
  },
  methods: {
    backTop() {
      document.getElementById("app").scrollTop = 0;
    },
    handleScroll() {
      if (window.pageYOffset  > 20) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang='less' >
.tool-bar {
  position: fixed;
  right: 0;
  bottom: 170px;
  ul {
    position: relative;
    width: 84px;
    color: #fff;
    li {
      a {
        display: block;
        text-align: center;
        width: 84px;
        height: 92px;
        background-color: #fff;
        border: 1px solid #f5f5f5;
        span {
          display: block;
          &:first-of-type {
            margin-top: 15px;
            font-size: 30px;
          }
        }
      }
      &:last-of-type {
        position: absolute;
        margin-top: 20px;
        bottom: -105px;
      }
    }
  }
}
</style>

